<template>
  <page-wrap
    stay-still
    :bgColor="topBg"
    :dark="false"
    back
    hideTab
    hideSafeArea
    title="活动场地"
  >
    <view class="event-venue">
      <image :src="titleImg" class="title-img"></image>
      <view class="map-wrap">
        <view class="map-item negotiation" @click="handleToNegotiation">
          <view class="map-item-text">校企洽谈</view>
        </view>

        <navigator url="/pagesSub/activity/sxh/guidance">
          <view class="map-item guidance">
            <view class="map-item-text">就业指导</view>
          </view>
        </navigator>

        <view class="map-item live" @click="handleToLive">
          <view class="map-item-text">直播带岗</view>
        </view>

        <view class="map-item share" @click="handleToShare">
          <view class="map-item-text">就业分享</view>
        </view>
        <navigator
          :url="'/pagesSub/careerGrow/zph/detail?activityId=' + activityId"
        >
          <view class="map-item recruit">
            <view class="map-item-text">企业招聘</view>
          </view>
        </navigator>

        <view class="guide">
          <!-- <view @click="handleShowGuide"> 场地指引 </view> -->
          <view @click="handleShowMap">查看场地图 </view>
          <view @click="handleShowQun" class="guide-qun">咨询交流群</view>
        </view>
      </view>
      <view class="tel">咨询帮助热线：0755-86153516</view>

      <u-popup v-model="showGuide" mode="center">
        <img :src="trafficImg" class="traffic-img" />
      </u-popup>
      <u-popup
        v-model="showMap"
        :safe-area-inset-bottom="true"
        border-radius="0"
        mode="bottom"
        height="1362"
        width="100%"
      >
        <view class="rotate-wrap">
          <image :src="mapImg" class="field-map-img" @click="handleCheckMap"></image>
        </view>
      </u-popup>
      <u-popup v-model="showQun" mode="center" border-radius="20" closeable>
        <view class="qun">
          <view class="qun-title">扫码入群</view>
          <image :src="qunImg" class="qun-img" show-menu-by-longpress></image>
          <view class="qun-label">
            <view>企业招聘信息及时同步</view>
            <view>求职路上，你不是一个人在战斗</view>
          </view>
        </view>
      </u-popup>
      <u-popup v-model="showLive" mode="center" border-radius="20" closeable>
        <view class="qun">
          <view class="qun-title">直播带岗</view>
          <image :src="liveImg" class="qun-img" show-menu-by-longpress></image> 
          <!-- show-menu-by-longpress图片链接需要带https协议头 -->
          <view class="qun-label">
            <view>长按保存图片，微信扫码观看直播</view>
          </view>
        </view>
      </u-popup>

      <u-modal
        v-model="showResumeModal"
        confirm-text="立即前往"
        show-cancel-button
        @confirm="handleToZph"
        content="上传成功，您可以去“企业招聘”板块寻找心仪职位投递简历"
      >
      </u-modal>
      <ResumeCheckDialog
        ref="resumeCheckDialogRef"
        @uploaded="uploadSuccess"
      ></ResumeCheckDialog>
    </view>
  </page-wrap>
</template>
<script>
import ShareMixin from "@/mixins/share";
import ResumeCheckDialog from "../components/ResumeCheckDialog.vue";

export default {
  mixins: [ShareMixin],
  components: {
    ResumeCheckDialog,
  },
  data() {
    return {
      activityId: "2031721125699544",
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      trafficImg: this.$imgBaseSelf + "zph/sxh/traffic.png",
      mapImg: "https://img3.job1001.com/ypMp/elan/images/zph/sxh/field-map.png",
      titleImg: this.$imgBaseSelf + "zph/sxh/title-1.png",
      qunImg: "https://img3.job1001.com/ypMp/elan/images/zph/sxh/qun.png",
      liveImg: this.$imgBaseSelf + "zph/sxh/live.png",
      showMap: false,
      showGuide: false,
      showQun: false,
      sharePath: "/pagesSub/activity/sxh/index",
      shareTitle: "第28届全国高校毕业生秋季就业双选会 - 一览职业",
      showResumeModal: false,
      showLive: false,
    };
  },
  mounted() {
    this.$refs.resumeCheckDialogRef.checkPersonResume();
  },
  methods: {
    handleJoin() {},
    handleToLive() {
      this.showLive = true;
      
      // uni.navigateTo({
      //   url: `/pagesSub/public/web/index?title=&link=${encodeURIComponent('https://cd450dac8f.live.polyv.cn/watch/5176327')}`,
      // });
    },
    handleShowMap() {
      this.showMap = true;
    },
    handleShowGuide() {
      this.showGuide = true;
    },
    handleToNegotiation() {
      uni.navigateTo({
        url: '/pagesSub/activity/sxh/school',
      })
    },
    handleToShare() {
      uni.navigateTo({
        url: '/pagesSub/activity/sxh/share',
      })
    },
    handleShowQun() {
      this.showQun = true;
    },
    uploadSuccess() {
      this.showResumeModal = true;
    },
    handleToZph() {
      uni.navigateTo({
        url: "/pagesSub/careerGrow/zph/detail?activityId=" + this.activityId,
      });
    },
    handleCheckMap() {
      uni.previewImage({
        current: 0,
        urls: [ 'https:'+this.mapImg],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.event-venue {
  min-height: 1375rpx;
  flex: 1;
  padding-bottom: 32rpx;
  background-image: url($img-base + "zph/sxh/bg-1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .title-img {
    width: 100%;
    height: 246rpx;
  }

  .map-wrap {
    position: relative;
    margin: 0 auto;
    width: 686rpx;
    height: 1056rpx;
    padding: 35rpx 24rpx;
    background-color: #ffffff;
    background-image: url($img-base + "zph/sxh/event-venue-map.png");
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 24rpx;
    text-align: center;

    .map-item {
      position: absolute;
      width: 210rpx;
      padding-top: 160rpx;

      &.negotiation {
        top: 436rpx;
        left: 110rpx;
      }

      &.guidance {
        top: 646rpx;
        right: 93rpx;
      }

      &.live {
        top: 358rpx;
        right: 26rpx;
      }

      &.share {
        top: 52rpx;
        right: 100rpx;
      }

      &.recruit {
        top: 86rpx;
      }
    }

    .map-item-text {
      display: inline-block;
      margin-top: -6rpx;
      width: 142rpx;
      height: 54rpx;
      line-height: 54rpx;
      font-size: 26rpx;
      color: #ffffff;
      background: #1b74f4;
      border-radius: 14rpx;
      text-align: center;
    }
  }

  .map-wrap-line {
    text-align: center;
    display: flex;
    justify-content: center;

    &.d-flex .map-item {
      position: relative;
      padding-top: 15rpx;
      background-color: #ffffff;
      z-index: 1;

      .map-item-text {
        margin-top: -9rpx;
      }
    }

    &.between {
      justify-content: space-between;
    }

    &-share {
      margin-top: -84rpx;
    }
  }

  .guidance-img {
    width: 143rpx;
    height: 128rpx;
  }

  .tel {
    margin: 30rpx 0;
    font-size: 30rpx;
    color: #555555;
    text-align: center;
  }
}

.guide {
  position: absolute;
  bottom: 48rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #027db4;

  view {
    margin: 0 80rpx;
  }

  &-qun {
    position: relative;
    font-size: 30rpx;

    &::after {
      position: absolute;
      right: -14rpx;
      top: -2px;
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: #FA5151;
    }
  }
}

.traffic-img {
  padding: 24rpx;
  width: 688rpx;
  height: 688rpx;
}

.field-map-img {
  width: 750rpx;
  height: 1262rpx;
}

.qun {
  padding-bottom: 32rpx;
  text-align: center;

  &-title {
    margin: 32rpx;
    font-size: 36rpx;
  }

  &-img {
    margin: 0 140rpx;
    width: 320rpx;
    height: 320rpx;
  }

  &-label {
    margin: 32rpx;
    font-size: 24rpx;
  }
}
</style>